<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/imageviewer.css"/>
	</head>
		<style type="text/css">
			.sub{
				background-color: #99CCFF;
				color: #666666;
			}
			.head{
				height: 40px;
			}
			.head-img{
				width: 40px;
				height: 40px;
			}
			#head-img1{
				position: absolute;
				bottom: 10px;
				right: 40px;
			}
			#head{
				line-height: 40px;
			}
			input[type=text],input[type=tel]{
				width: 75%;
				height: 100%;
				text-align: center;
				margin-bottom: 0;
				margin-right: 0;
				float: right;
				border: none;
			}
			.mui-table-view-cell>a{
				line-height: 40px;
			}
			.bottom{
				border: none;
				background-color:gainsboro;
				opacity: 0.8;
			}
			.validate{
				display: none;
			}
			
		</style>
	<body>
		<header class="mui-bar mui-bar-nav sub">
			<span class="mui-icon mui-icon-back mui-pullleft" onclick="back()"></span>
			<h5 class="mui-title">个人信息</h5>
		</header>
		<div class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a id="head"  class="mui-navigate-right">头像
							<span class="mui-pull-right head">
								<img src="../images/logo.png" class="mui-action-preview head-img" data-preview-src="" data-preview-group="1" id="head-img1"/>
								<input type="hidden" name="headimg" id="headimg" value="../images/logo.png" />
							</span>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a id="nickname" class="">
							昵称
							<input type="text" class="inputNickname" disabled name="nickname" value="嘻嘻" required="required" />
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a id="userid">
							用户ID
							<input type="text" class="inputUserid" disabled value="123456" required="required" />
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a id="usertel">
							手机号码
							<input type="tel" class="inputTel" disabled value="15211430656" />
						</a>
						<button class="btnTel" style="float: right;" disabled>重新绑定手机</button>
					</li>
					<li class="mui-table-view-cell validate">
						<a id="telVali">
							验证码
							<input  type="text" class="inputVali" value="999999" />
						</a>
						<button class="mui-btn-blue mui-pull-left sendVali">重发验证码</button><span class="" style="font-size: 12px;line-height: 40px;color: gray;padding: 2% 2%;">请输入收到的验证码</span>
						<!--<button class="mui-btn-green mui-pull-right sendVali">确认</button>-->
					</li>
				</ul>
			</div>
		</div>
		<div class="mui-bar mui-pull bottom">
			<button id="changeMation" class="mui-btn mui-btn-success bottomBtn mui-pull-left">修改资料</button>
			<button id="saveMation" disabled class="mui-btn mui-btn-red bottomBtn mui-pull-right">保存修改</button>
		</div>
		
		
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<script type="text/javascript">
			mui.init();
			
			mui.previewImage();
			
			mui.plusReady(function(){
				//获取当前窗口对象 以及创建此窗口的父窗口对象
				var ws = plus.webview.currentWebview();
				var wo = ws.opener();
				//显示窗口页面  关闭创建窗口等待框
				ws.show('pop-in');
				wo.evalJS('closeWaiting()');
			});
			
			/**
			 * ajax获取数据
			 */
			
			
			
			
			
			
			/**
			 * 修改资料 保存资料
			 * 
			 */
			var changebtn = document.getElementById('changeMation');
			var savebtn = document.getElementById('saveMation');
			var nickName = document.getElementsByClassName('inputNickname')[0];
			var userid = document.getElementsByClassName('inputUserid')[0];
			var tel = document.getElementsByClassName('inputTel')[0];
			var btntel = document.getElementsByClassName('btnTel')[0];
			var validate = document.getElementsByClassName('validate')[0];
			changebtn.addEventListener('tap',function(){
				nickName.removeAttribute('disabled');
				userid.removeAttribute('disabled');
				btntel.removeAttribute('disabled');
				savebtn.removeAttribute('disabled');
			});
			
			btntel.addEventListener('tap',function(){
				tel.removeAttribute('disabled');
				validate.style.display = 'block';
			});
			
			
			savebtn.addEventListener('tap',function(){
				nickName.setAttribute('disabled');
				userid.setAttribute('disabled');
				tel.setAttribute('disabled');
				btntel.setAttribute('disabled');
				savebtn.setAttribute('disabled');
				validate.style.display = 'none';
			})
			
			
			
			
			
			
			
			
			//加把锁用来防止冒泡(要不是这破壁插件居然也是后续冒泡事件之一哪有这么麻烦，雾草草草草)
			var q = 0;
			//更改头像
			document.getElementById('head-img1').addEventListener('tap',function (e){
				//alert('我是img');
				q = 1;
			});
			mui('.mui-table-view-cell').on('tap','#head',function(e){
				if(q){
					q = 0;
					return;
				}
				//alert('我是管务');
				if(mui.os.plus){
					//设置按钮样式
					var btn = [
						{
							title:'P张头像'
						},{
							title:'从相册选取'
						}
					];
					//调用原生系统弹出选择框
					plus.nativeUI.actionSheet({
						title:"太丑了换头像",
						cancel:'太丑了不换了',
						buttons:btn
					},function(e){
						//console.log(e.index);
						switch (e.index){
							case 0:
								break;
							case 1:
							//调用系统拍照功能
								getPicture();
								break;
							case 2:
							//调用本地相册功能
								getGallery();
								break;
							default:
								break;
						}
					})
				}
			});
			//调用本地相册功能
			var getGallery = function(){
				plus.gallery.pick(function(path){
					document.getElementById('head-img1').src = path;
					document.getElementById('headimg').value = path;
				},function(e){
					console.log(e.cede);
				},{filter:'image',multiple:false});
			}
			
			
			
			
			//调用手机拍照
			var getPicture = function(){
				//调用手机拍照
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p){
					plus.io.resolveLocalFileSystemURL(p,function (entry){
						document.getElementById('head-img1').src = entry.toLocalURL();
						document.getElementById('headimg').value = entry.toLocalURL();
					},function (error){
//						console.log(error);
					});
				},errorCB(),{filename:"_doc/camera/",index:'1'});
			}
			//拍照成功回调
			var successCB = function(file_path){
				plus.io.resolveLocalFileSystemURL(file_path,function (entry){
					document.getElementById('head-img1').src = file_path;
				},function (error){
//					console.log(error);
				});
			}
			var errorCB = function(error){
//				console.log(error.code);
//				console.log(error.message);
			}

		</script>
	</body>

</html>